﻿<div id="status" ng-show="pageLoading"></div>
<div class="all-elements">
    <div id="sidebar" class="page-sidebar">
        <div class="page-sidebar-scroll">
            <div class="nav-item selected-nav-item" data-ng-repeat="r in roleByGroup">
                <a href="#/{{r.RoleValue}}">
                    <div class="icon-nav {{r.RoleValue}}"></div>
                    {{r.RoleName}}
                </a>
            </div>
            <div class="nav-item">
                <a href="#">
                    <div class="icon-nav icon-share" ng-click="out()"></div>
                    THOÁT
                </a>
            </div>
        </div>
    </div>


    <div id="content" class="page-content">


        <div class="page-content-wrapper">
            <div class="logo-large">
                <div class="menu"><a href="javascript:void(0)" class="deploy-sidebar"><img ng-src="{{severName}}icon/menu.png" /></a> </div>
                <img ng-src="{{severName}}logo.png" />
            </div>
            <div class="container no-bottom">
                <div class="container no-bottom">
                    <div class="red-box" ng-show="ready">
                        <div class="toggle-v4">
                            <a href="javascript:void(0)" ng-click="showHideAddFriend()" class="show-toggle-v4"><span class="icon-user-min icon-inline white-icon"></span><span class="content">yêu cầu kết bạn({{countAddFriend}})</span></a>
                            <div class="clear"></div>
                            <div ng-show="addfriend" class="toggle-content-v4">
                                <ul>
                                    <li id="newFriend_{{a.Id}}" ng-repeat="a in getAddFriend">
                                        <div class="invite-friend">
                                            <a href="#/profile/{{a.FriendId}}">
                                                <img ng-src="{{severName}}Avatar/{{a.Avatar}}" />{{a.FriendName}}
                                            </a>
                                            <span class="icon-remove-sign-1 icon-inline red-icon right"></span>
                                            <span class="icon-ok-1 icon-inline red-icon right" ng-click="acceptFriend(a.Id)"></span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="float-right" ng-click="seeAllNewFriend()"><span>xem tất cả »</span></div>
                            </div>
                        </div>
                    </div>
                    <div class=" gray-box">
                        <div class="toggle-v4">
                            <a href="javascript:void(0)" ng-click="showHideNewComment()" class="show-toggle-v4"><span class="icon-comments icon-inline  white-icon"></span><span class="content">Bình luận mới({{countNewMessage}})</span></a>
                            <!--<a href="#" class="hide-toggle-v4"><span class="icon-comments icon-inline white-icon"></span><span class="content">Bình luận mới(40)</span></a>-->
                            <div class="clear"></div>

                            <div ng-show="newcomment" class="toggle-content-v4">
                                <ul>
                                    <li id="newComment_{{r.Id}}" data-ng-repeat="r in getNewComment">
                                        <div class="new-message">
                                            <a ng-click="goToRoom(r)">Phòng {{r.RoomName}}({{r.Count}})</a>
                                            <span class="icon-remove-sign-2 icon-inline gray-icon right" id="{{r.Id}}" ng-click="deleteNotification(r.Id)"></span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="float-right" ng-click="seeAllNewMessage()"><span>xem tất cả »</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="blue-box">
                        <div class="toggle-v4">
                            <a href="javascript:void(0)" ng-click="showHideFromRoom()" class="show-toggle-v4"><span class="icon-circle-arrow-right-min icon-inline white-icon"></span><span class="content">Từ phòng học({{countFromRoom}})</span></a>
                            <div class="clear"></div>
                            <div ng-show="newfromroom" class="toggle-content-v4">
                                <ul>
                                    <li id="joinRoom_{{a.Id}}" ng-repeat="a in getJoinRoom">
                                        <div class="invite-room">
                                            <a href="#">Từ {{a.UserName}}</a>
                                            <span class="icon-remove-sign-3 icon-inline blue-icon right" ng-click="deleteJoinRoom(a.Id)"></span>
                                            <span class="icon-ok-3 icon-inline blue-icon right" ng-click="joinRoom(a)"></span>
                                        </div>
                                    </li>
                                    <li id="acceptRoom_{{j.Id}}" data-ng-repeat="j in getAcceptRoom">
                                        <div class="invite-room">
                                            <a>Đã vào phòng {{j.RoomId}}</a>
                                            <span class="icon-remove-sign-3 icon-inline blue-icon right" ng-click="deleteAcceptRoom(j.Id)"></span>
                                        </div>
                                    </li>
                                </ul>
                                <div class="float-right" ng-click="seeAllNewFromRoom()"><span>xem tất cả »</span></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="chat-container">
            <div iscrollable="scrollbars: true, mouseWheel: true, interactiveScrollbars: true" id="wrapper">
                <div id="scroller">
                    <div id="thelist">
                        <div class="viewport">
                            <div id="thelist" class="overview">
                                <div class="chat-line" data-ng-repeat="m in MessageByUser">
                                    <img class="image-decoration user-chat-line" ng-src="{{severName}}Avatar/{{m.Avatar}}" />
                                    <div ng-if="!m.Atack">
                                        {{m.CommentText}}
                                    </div>
                                    <div id="mess_{{m.Id}}" ng-if="m.Atack" class="image-atack">
                                        <img ng-src="{{severName}}Upload/{{m.Atack}}" ng-click="downloadImg(m.Atack)"/>
                                        <span class ="icon-remove-sign-4 icon-inline gray-icon right" ng-click="delComment(m.Id)"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="list-friend">
                <li data-ng-repeat="f in friends">
                    <a href="#/profile/{{f.FriendId}}">
                        <img class="image-decoration friend-online" ng-src="{{severName}}Avatar/{{f.Avatar}}" />
                    </a>
                </li>

                <li class="end-list-friend" ng-show="endlistfriend">
                    <a href="#/profile">
                        +{{countfriends}}
                    </a>
                </li>
            </ul>
            <div class="chat-area">
                <textarea ng-model="messageData.CommentText" placeholder="Viết bình luận..."></textarea>
                <a class="atack" ng-click="selectPicture()"><span class="icon-paperclip mini-icon"></span><span class="mini-size">Chia sẻ nhanh</span></a>
                <a class="camera" ng-click="takePicture()"><span class="icon-camera-retro mini-icon"></span><span class="mini-size">Đính kèm</span></a>
                <input type='submit' value='Gửi' ng-click="createComment()" />

            </div>
        </div>
    </div>

</div>